﻿@{
    Layout = null;
}

<div class="panel no-border no-margin">
    <div class="panel-header bg-lightBlue fg-white"><i class="icon-broadcast"></i> Network Endpoints</div>
</div>

<div data-ng-init="getEndpoints()">
    <div ng-controller="EditEndpointController">

        <script type="text/ng-template" id="myModalContent.html">
        <div class="panel no-border margin20 no-padding">
            <form>
                <fieldset>
                    <legend>Endpoint Settings</legend>
                    <label>Name</label>
                    <div class="input-control text" data-role="input-control">
                        <input type="text" data-ng-model="endpoint.name" placeholder="Type a profile name">
                        <button class="btn-clear" tabindex="-1"></button>
                    </div>
                    <div class="input-control text" data-role="input-control" style="margin-bottom: 40px">
                        <label class="inline-block" style="margin-right: 5px">
                            IP Address
                            <input type="text" data-ng-model="endpoint.address" width="10" size="5" placeholder="">
                        </label>
                        <label class="inline-block" style="margin-right: 5px">
                            Port No.
                            <input type="text" data-ng-model="endpoint.port" width="10" size="5" placeholder="">
                        </label>
                    </div>

                    <div class="input-control text" data-role="input-control" style="margin-bottom: 40px">
                        <label class="inline-block" style="margin-right: 5px">
                            Buffer size
                            <input type="number" data-ng-model="endpoint.buffer" width="10" size="5" placeholder="">
                        </label>
                    </div>

                    <div class="input-control select" data-role="input-control">
                        <label for="category">
                            ASTERIX
                            <select style="width:200px" class="form-control" data-ng-model="endpoint.category" data-ng-options="c.id as c.name for c in categoryList"></select>
                        </label>
                    </div>
                    
                    <div class="input-control radio default-style inline-block" data-role="input-control" style="margin-bottom: 40px">
                        <label class="inline-block">
                            <input type="radio" name="io" data-ng-model="endpoint.channel" value="0" style="margin-right: 20px" />
                            <span class="check"></span>
                            IN
                        </label>
                        <label class="inline-block">
                            <input type="radio" name="io" data-ng-model="endpoint.channel" value="1" />
                            <span class="check"></span>
                            OUT
                        </label>
                    </div>
                    <div>
                        <input class="default" type="submit" ng-click="ok()" value="SUBMIT">
                        <input class="default" type="reset" value="RESET">
                    </div>
                </fieldset>
            </form>
        </div>
        </script>

        <div id="endpoint-grid" class="grid-style" data-ng-grid="endpointGrid" />

        <button type="button" class="primary" data-ng-click="add()"><i class="icon-plus" /> Add</button>
        <button type="button" class="danger" data-ng-click="deleteEndpoint(selectedEndpoint.id)"><i class="icon-minus" /> Delete</button>
        <button type="button" class="inverse"><i class="icon-blocked" /> Disable</button>
    </div>

</div>
